<template>
  <div class="decision" :class="fullScreen?'decision-wrapper':''" >
    <div class="nav-top"  :class="leftAnimate"  :style="{width:navWidth+ 'px',top:top+'px'}">
      <div class="nav-top-container">
        <h2 class="nav-top-title">全市就业情况分析
          <a href="#/humanResources/detail/graduates-employment-detail">毕业生</a>
        </h2>
        <div class="top-operate">
          <svg class="all-close-btn icon-svg" v-if="!fullScreen" @click="closeAll"  viewBox="0 0 612 792">
            <path :d="svgPath.closeFullScreen"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="all-city-employment">
      <div style="margin-top:60px;margin-left:12px;margin-right:12px;margin-bottom:12px;">
        <div  :style="{height:height-15+'px',background:'#1b2b44'}">
          <h3 class="city-title">
            <div class="chart-name"><span class="left-circle"></span>全市就业情况分析</div>
            <a href="#/humanResources/detail/new-employment-in-cities-detail" class="chart-next" style="color:#67ffdb;font-size:12px;underline:none;">城镇新就业登记台账 ></a>
          </h3>
          <div class="distribution-insured-persons-wrapper">
            <ul>
              <li class="left-card">
                <div class="content-left">
                  <img src="../../assets/img/chart-svg/history-situation.svg" alt="" class="card-icon">
                  <span class="card-title">历史就业情况</span>
                </div>
                <div class="content-right">
                  <span class="card-subTitle">历史总人数</span>
                  <p>
                    <span class="card-number">{{hisTotal}}</span>人
                  </p>
                </div>
              </li>
              <li class="middle-card">
                <div class="content-left">
                  <img src="../../assets/img/chart-svg/year-target.svg" alt="" class="card-icon">
                  <span class="card-title">2018年目标</span>
                </div>
                <div class="content-right">
                  <span class="card-subTitle">新增就业人数</span>
                  <p>
                    <span class="card-number">{{targetTotal}}</span>人
                  </p>
                </div>
              </li>
              <li class="right-card">
                <div class="content-left">
                  <img src="../../assets/img/chart-svg/actual-situation.svg" alt="" class="card-icon">
                  <span class="card-title">2018年实际</span>
                </div>
                <div class="content-right">
                  <span class="card-subTitle" style="left:-5px;">新增就业人数/完成率</span>
                  <p>
                    <span class="card-number">{{finishTotal}}</span>人/{{finishRate}}%
                  </p>
                </div>
              </li>
            </ul>
          </div>
          <div class="chart-container">
            <div id="new-employment-analysis" :style="{height:height-145+'px'}"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-item new-chart-container">
      <div class="chart-content-wrapper chart-content-wrapper1" :style="{height:height*1.4+'px',backgroundColor:'#1b2b44'}" @mouseenter="mouseenter()" @mouseleave="mouseleave">
        <top-filter :title="reportName" ref="topFilter" :isShowHelp="false">
          <double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filter" type="planArea"></double-check-filter>
        </top-filter>
        <div class="bottom-chart-container" :style="{height:height*1.4-55+'px',background:'#1b2b44'}">
          <div>
            <div  class="disease-species-name">
              <div class="disease-species-name-item">
                <img src="../../assets/img/chart-svg/age-scatter.svg" alt="">
                年龄分布
              </div>
              <div class="disease-species-name-item">
                <img src="../../assets/img/chart-svg/sex-scatter.svg" alt="">
                性别分布
              </div>
              <div class="disease-species-name-item">
                <img src="../../assets/img/chart-svg/medical-time.svg" alt="">
                就业去向分布
              </div>
            </div>
            <div class="medical-chart-box" :style="{height:0.6*height+'px'}">
              <div  class="disease-species-item" id="employment-age"></div>
              <div class="disease-species-item" id="employment-sex"></div>
              <div class="disease-species-item" id="employment-time"></div>
            </div>
            <div class="employment-time-chart" id="employment-time-line" :style="{height:0.6*height+'px',marginTop:'10px'}"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '../../assets/css/last-charts.css'
  import '../last/filter/topFilter.css'
  import {svgPath,quitFullScreen} from "../../assets/js/utils";
  import {loadingOpt} from '../../assets/js/utils.js'
  import DoubleCheckFilter from '../last/filter/double-check-filter.vue'
  import TopFilter from '../last/filter/top-filter1.vue'
  import {baseApiF,getSearchItems} from "../../api/api";
  export default {
    props: ['isChange','fullScreen','isCollapse','pageChange'],
    data() {
      return{
        reportName:'2018年度新增就业人员分析',
        leftAnimate:'',
        svgPath:svgPath,
        navWidth:800,
        top:70,
        height: 500,
        areaCode: '',
        areaName: '',
        filter:null,
        showChart:true,
        finishRate: "65.45",
        finishTotal: "35996",
        hisTotal: "325224",
        targetTotal: "55000",
      }
    },
    components:{
      DoubleCheckFilter,
      TopFilter
    },
    watch:{
      isChange(){
        setTimeout(()=>{
          // this.getChartItem();
          this.myChart5.resize();
          this.resizeChart();
        },100)
      },
      pageChange(){
        // this.myChart5.resize();
        // this.resizeChart();
      },
    },
    activated(){},
    mounted() {
      setTimeout(()=>{
        this.getChartItem();
      },300)
      this.myChart1 = this.$echarts.init(document.getElementById("employment-age"));
      this.myChart2 = this.$echarts.init(document.getElementById("employment-sex"));
      this.myChart3 = this.$echarts.init(document.getElementById("employment-time"));
      this.myChart4 = this.$echarts.init(document.getElementById("employment-time-line"));
      this.myChart5 = this.$echarts.init(document.getElementById("new-employment-analysis"));
      //获取筛选数据
      // that.getFirstData();
      this.getFirstData();
      this. drawEmploymentTime();
      this.drawMedicalAge();
      this.drawMedicalSex();
      this.drawMedicalTime();
      this.getEmployment();
      let that = this;
      this.myChart5.on('click',function(params){
        if(params.componentSubType=='bar'){
          let areaCode = params.data.id;
          that.push({path:'#/humanResources/detail/graduates-employment-detail',query:{areaCode:areaCode}})
        }
      })
    },
    methods: {
      getEmployment(){
        this.myChart5.showLoading(loadingOpt)
        this.$axios.post(`http://172.19.210.2:8888/report-server/hr/townJobAnalyze`).then(res=>{
          if(res.status==200){
            if(res.data.code==0){
              let json = res.data.data;
              this.myChart5.hideLoading();
              this.hisTotal = json.hisTotal;
              this.finishRate = json.finishRate;
              this.finishTotal = json.finishTotal;
              this.targetTotal = json.targetTotal;
              this.drawEmploymentAnalysis(json.tjs);
            }
          }
        })
      },
      getFirstData(id){
        getSearchItems('init/initInput').then((res) => {
          if (res.code == 0) {
            this.filter = res.data;
            let areaCode = [];
            let areaName = [];
            this.filter.nc.planArea.map((item, index) => {
              if (index > 0 && index <= 6) {
                areaCode.push(item.selectId)
                areaName.push(item.selectName);
              }
            });
            this.areaCode = areaCode.join(',');
            this.areaName = areaName.join('、');
          }
        })
      },
      closeAll(){
        quitFullScreen();
      },
      mouseenter (e) {
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave () {
        this.$refs.topFilter._showChartTitle()
      },
      planAreaSelect (selectedIdArr, selectedNameArr) {
        // 统筹区选择
        this.areaCode = selectedIdArr.join(',');
        this.areaName = selectedNameArr.join('、');
        this.getData();
      },
      //动态设置宽高
      getChartItem(){
        let height = document.querySelector('body').clientHeight;
        let barHeight = 70;
        let sideWidth = 44;
        let bodyWidth = document.querySelector('body').clientWidth;
        let top = 70;
        if (document.querySelector('.el-header')) {
          barHeight = document.querySelector('.el-header').clientHeight;
          if(document.querySelector('.el-aside')){
            sideWidth = document.querySelector('.el-aside').clientWidth;
          }
        } else {
          barHeight = 0;
          sideWidth = 0;
          top=0;
        }
        this.top = top;
        this.left = sideWidth;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight -54 ;
        //每一个图表块的宽度
        let width = 1000;
        if(document.querySelector('.chart-box')){
          width = document.querySelector('.chart-box').clientWidth;
        }
        this.width = (width - 44) / 2;
        //nav-top left值
      },
      //全市就业情况分析
      drawEmploymentAnalysis(json){
        let x = [];
        let target = [];
        let current = [];
        let rate = [];
        json.map((item,i)=>{
          x.push(item.areaName);
          target.push({value:item.targetCount,id:item.areaCode});
          current.push(item.finishCount);
          rate.push(item.rate);
        })
        this.myChart5.setOption({
          backgroundColor:'#1B2B44',
          grid:{
            top:70,
            left:60,
            right:60,
            bottom:25,
          },
          legend:{
            left:'center',
            top:20,
            icon:'rect',
            itemWidth: 10,
            itemHeight: 10,
            data:['目标就业登记人数','实际就业登记人数'],
            textStyle:{
              color:'#fff'
            },
            selectedMode: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: function (params) {
              let i = params[0].dataIndex;
              return `
                  <p>2018年城镇就业人数</p>
                  <p >行政区划: ${params[0].axisValue}</p>
                  <p>目标：${params[0].value}人</p>
                  <p>当前：${params[1].value}人</p>
                  <p>完成率：${rate[i]}%</p>
`
            },
          },
          xAxis: {
            data: x,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#2a4565'
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            axisPointer: {
              label: {
                precision: 0
              }
            },
            name: '单位：人',
            nameTextStyle: {
              color: '#fff',
            },
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#2a4565'
              }
            },
            axisTick:{
              show:false //不显示x轴坐标的刻度
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            }
          },
          series:[{
            name: '目标就业登记人数',
            type: 'bar',
            color: '#ff6a94',
            smooth: true,
            symbol: 'none',
            itemStyle: {

            },
            barWidth:'20%',
            barMaxWidth:30,
            data: current,
          },{
            name: '实际就业登记人数',
            type: 'bar',
            color: '#ffd669',
            smooth: true,
            symbol: 'none',
            itemStyle: {

            },
            barWidth:'20%',
            barMaxWidth:30,
            data: target,
          }]
        })
      },
      //性别分布
      drawMedicalSex(json){
        // console.log(json)
        json = {
          jiuZhenRenYuanZongShu:'10000',
          jiuZhenRenShuXianShi:[100,80],
          zhanBi:[100,80]
        };
        let pieData=[{value:100,name:'男性60%',itemStyle:{color:'#3281fd'}},
          {value:80,name:'女性40%',itemStyle:{color:'#ff6a93'}}];
        let that = this;
        this.myChart2.setOption({
          backgroundColor:'#1B2B44',
          title: {
            text: `{a|${json.jiuZhenRenYuanZongShu}}\n{b|就业人数（人）}`,
            x: "center",
            y: "23%",
            textStyle: {
              fontSize: 20,
              color: "#67ffdb",
              fontWeight: "bolder",
              rich: {
                a: {
                  lineHeight: 28,
                  fontSize: 18,
                  fontWeight: "bold"
                },
                b: {
                  fontSize: 16,
                  fontWeight: "bold"
                },
              }
            }
          },
          legend: {
            orient: 'vertical',
            align:"left",
            left:"center",
            bottom: 15,
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 10,
            selectedMode: false,
            textStyle: {
              color: '#fff',
            },
          },
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: function(params) {
              let i = params.dataIndex;
              let title = "";
              if (i == 0) {
                title = "男性";
              } else if (i == 1) {
                title = "女性";
              }
              let txt = `
                    <p>就业登记人数</p>
                    <p>性别：${title}</p>
                    <p>人数：${json.jiuZhenRenShuXianShi[i]}人</p>
                    <p>占比：${json.zhanBi[i]}%</p>
              `;
              return txt;
            }
          },
          series: [
            {
              center: ["50%", "35%"],
              name: json.reportName,
              type: "pie",
              radius: ["45%", "65%"],
              hoverAnimation: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              clockwise:false,
              minAngle:5,
              data: pieData
            }
          ]
        });
      },
      //就业去向分布
      drawMedicalTime(json) {
        json = {
          jiuZhenRenYuanZongShu:'10000',
          jiuZhenRenShuXianShi:[100,80,60,40,20],
          zhanBi:[100,80,60,40,20]
        };
        this.myChart3.setOption({
          backgroundColor: "#1B2B44",
          grid: {
            top: 40,
            left: "1%"
          },
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            textStyle: {
              fontSize: 12
            },
            formatter: function(params) {
              let i = params[0].dataIndex;
              let txt = `
                          <p>就业登记人数</p>
                          <p>就业去向：${params[0].name}</p>
                          <p>人数：${json.jiuZhenRenShuXianShi[i]}</p>
                          <p>占比：${json.zhanBi[i]}%</p>
              `;
              return txt;
            }
          },
          yAxis: {
            show: false
          },
          xAxis: {
            data: ['单位聘用','私营个体','灵活就业','基层岗位','公益岗位'],
            axisLine: {
              show: false // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true,// 显示x轴坐标数值
              interval: 0,
              textStyle: {
                color: "#fff",
                lineHeight: 18
              },
            }
          },
          series: [{
            type: "bar",
            data: json.jiuZhenRenShuXianShi,
            stack: "age",
            color: "#ff6a93",
            barWidth: "40%",
            barMaxWidth: 30,
            label: {
              show: true,
              position: "top",
              formatter: function(params) {
                let i = params.dataIndex;
                return `${json.zhanBi[i]}%`
              },
              color: "#fff"
            }
          }]
        })
      },
      //年龄分布
      drawMedicalAge(json){
        let x = ['16-29岁','30-39岁','40-49岁','50岁以上'];
        let newArr = [20.23,22.54,25.51,8.72]
        let dataShadow = [];
        for (let i = 0; i < x.length; i++) {
          dataShadow.push(100);
        }
        this.myChart1.setOption({
          backgroundColor:'#1B2B44',
          tooltip:{
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              let i = params[0].dataIndex;
              let name = params[0].name;
              let txt = `
                          <p>就业登记人数</p>
                          <p>年龄段：${name}</p>
                          <p>人数：1000人</p>
                          <p>占比：${newArr[i]}%</p>
              `;
              return txt;
            }
          },
          grid: {
            top: 5,
            right:60,
            bottom:10,
            left: 100
          },
          xAxis: {
            show: false
          },
          yAxis: {
            data: x,
            inverse: true,
            axisLine: {
              show: false // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true,// 显示x轴坐标数值
              textStyle: {
                color: "#fff"
              }
            }
          },
          series: [{ // For shadow
            type: "bar",
            itemStyle: {
              normal: { color: "rgba(255,255,255,0.05)" }
            },
            barGap: "-100%",
            barCategoryGap: "40%",
            data: dataShadow,
            barWidth: "40%",
            barMaxWidth: 20,
            label: {
              show: true,
              position: "right",
              formatter: function(params) {
                let i = params.dataIndex;
                return `${newArr[i]}%`;
              },
              color: "#fff"
            },
            animation: false
          }, {
            type: "bar",
            data: newArr,
            color: "#3281fd",
            barWidth: "40%",
            barMaxWidth: 20,
            animation: false
          }]
        });
      },
      //就业时间分布
      drawEmploymentTime(json){
        this.myChart4.setOption({
          grid:{
            top:60,
            left:60,
            right:60,
            bottom:25,
          },
          title:{
            text:'就业时间分布',
            left:30,
            textStyle:{
              color:'#fff',
              fontSize:14,
              fontWeight:'normal'
            }
          },
          legend:{
            left:'center',
            itemWidth: 30,
            itemHeight: 10,
            data:['就业登记人数'],
            textStyle:{
              color:'#fff'
            },
            selectedMode: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: function (params) {
              return `<p>就业登记人数</p>
                  <p >月份: ${params[0].axisValue}</p>
                  <p>人数: 1000人</p>`
            },
          },
          xAxis: {
            data: ['201801','201802','201803','201804','201805','201806'],
            type : 'category',
            boundaryGap : false,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#2a4565'
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            axisPointer: {
              label: {
                precision: 0
              }
            },
            name: '单位：人',
            axisTick:{
              show:false //不显示x轴坐标的刻度
            },
            nameTextStyle: {
              color: '#fff',
            },
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#2a4565'
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            }
          },
          series:[{
            name: '就业登记人数',
            type: 'line',
            color: 'rgba(41, 176, 158, 0.4)',
            smooth: true,
            symbol: 'none',
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default'
                },
              },
            },
            data: [920,890,1000,890,1111,990],
          }]
        })
      },
      showLoading(){
        this.myChart1.showLoading(loadingOpt);
        this.myChart2.showLoading(loadingOpt);
        this.myChart3.showLoading(loadingOpt);
        this.myChart4.showLoading(loadingOpt);
      },
      hideLoading(){
        this.myChart1.hideLoading();
        this.myChart2.hideLoading();
        this.myChart3.hideLoading();
        this.myChart4.hideLoading();
      },
      clearChart(){
        this.myChart1.clear();
        this.myChart2.clear();
        this.myChart3.clear();
        this.myChart4.clear();
      },
      resizeChart(){
        this.myChart1.resize();
        this.myChart2.resize();
        this.myChart3.resize();
        this.myChart4.resize();
      }
    }
  }
</script>
<style scoped>
  @import '../../assets/css/decision.css';
  @import '../../assets/css/portrait-personk-detail.css';
  .city-title{
    padding: 10px;
    height: 34px;
    line-height: 34px;
    color:#fff;
    font-size:14px;
    box-sizing:border-box;
  }
  .chart-name{
    float:left;
  }
  .chart-next{
    float:right;
    cursor:pointer;
    text-decoration:none;
  }
  .left-circle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #018DDE;
    display: inline-block;
    margin:0 10px;
  }
  .content-right{
    color:#fff;
  }
  .card-subTitle{
    font-size:14px;
    position:relative;
    top:-10px;
  }
  .chart-container{
    background: url('../../assets/img/noData.png') no-repeat center 30%;
    background-size:15%;
  }
  .disease-species-name{
    height: 32px;
    line-height: 32px;
    color: #fff;
    margin-left:40px;
  }
  .disease-species-name-item{
    float:left;
    width:33.3%;
  }
  .disease-species-name-item img{
    height: 20px;
    margin-top: 6px;
    width: 20px;
    float: left;
    margin-right: 10px;
  }
  .medical-chart-box{
    /*margin-left:40px;*/
    overflow:hidden;
  }
  .disease-species-item{
    float:left;
    width:33.3%;
    height:100%;
  }
</style>
